<template>
<div>
    <!-- 播放器 -->
        <div class="player" v-if="showplayer" >
            <img :src="SongDetail.al.picUrl" alt="" class="mohu">
            <div class="button" @click="showplayer=false">
                <span class="iconfont icon-arrow-down"></span>
            </div>
            <div class="title">
                <h2>{{SongDetail.name}}</h2>
                <h3><span v-for="(key,index) in SongDetail.ar" :key="index">{{key.name}}&nbsp;</span></h3>
            </div>
            <div class="content">
                <div
                v-show="togglelyric == true"
                @click="togglelyric = false"
                :class="['img', 'play', { pause: iconplay }]"
                >
                <img :src="SongDetail.al.picUrl" alt="" />
                </div>
                <div
                v-show="togglelyric != true"
                @click="togglelyric = true"
                class="lyrics"
                >
                <ul :style="{ top: lyricTop }">
                    <li
                    :class="{ con: currentRow == index }"
                    v-for="(item, index) in lyric"
                    :key="index"
                    >
                    {{ item.text }}
                    </li>
                </ul>
                </div>
                <router-link :to="{path:'/comment',query:{id:playerId}}">
                <span class="iconfont icon-pinglun pinglun" @click="showplayer=false"></span>
                </router-link>
            </div>
            <div class="range">
                <div class="bar">
                    <span class="timeLeft">{{timeLeft | playerTime}}</span>
                    <van-slider v-model="value" bar-height="4px" @change="sliderchange" active-color="#ee0a24">
                        <template #button>
                            <div class="custom-button"></div>
                        </template>
                    </van-slider>
                    <span class="timeRight">{{timeRight | playerTime}}</span>
                </div>
            </div>

            <div class="buttons">
                <div class="iconfont icon-xunhuan1" v-if="playerType == 1" @click="changeMode"></div>
                <div class="iconfont icon-random" v-else @click="changeMode"></div>
                <div class="iconfont icon-SanMiAppoutlinei1" @click="startup"></div>
                <div :class="['iconfont',iconplay?'icon-zanting1':'icon-ico_zanting_xuanzhong','center']" @click.stop="toggleplay"></div>
                <div class="iconfont icon-SanMiAppoutlinei" @click="lowerFun"></div>
                <div class="iconfont icon-aixin" @click="getLikeFun(true)" v-if="!likeshow"></div>
                <div class="iconfont icon-aixin red" @click="getLikeFun(false)" v-if="likeshow"></div>
            </div>
        </div>
    <!-- 迷你播放器 -->
    <div class="mini-player">
        <div class="img" :class="['img','play',{'pause':iconplay}]" @click="showplayer=true">
            <img :src="SongDetail.al.picUrl" alt="">
        </div>
        <div class="text">
            <h2>{{SongDetail.name}}</h2>
            <h3><span v-for="(k,i) in SongDetail.ar" :key="i">{{k.name}}&nbsp;</span></h3>
        </div>
        <div class="control" @click.stop="toggleplay">
            <span class="iconfont icon-bofang" v-show="iconplay"></span>
            <span class="iconfont icon-zantingtingzhi" v-show="!iconplay"></span>
        </div>
        <div class="lists" @click="isMusicPlayList = true">
            <span class="iconfont icon-gengduo"></span>
        </div>
        <!-- 音乐播放列表 -->
        <div class="musicPlayList" v-if="isMusicPlayList">
            <div class="dt">
                <h1><i class="iconfont icon-xunhuan1" v-if="playerType == 1" @click="changeMode"></i>                
                <i class="iconfont icon-random" v-else @click="changeMode"></i>
                循环播放({{playerLists.length}})</h1>
                <span class="iconfont icon-shanchu1" @click="clearList()"></span>
                </div>
            <dl>
                
                <dd v-for="(item,index) in playerLists" :key="index" @click="editPlayerId(item.id)">
                    <p><i v-if="item.id == playerId" class="iconfont icon-laba"></i>{{item.name}}</p>
                    <span class="iconfont icon-shanchu" @click="itemdel(index)"></span>
                </dd>
            </dl>
            <div class="button" @click="isMusicPlayList = false">关闭</div>
        </div>
        <audio ref="audio" controls hidden  :src="musicData" @ended="endedFun" @canplay="canplayFun();toggleplay()"></audio>
    </div>
</div>
</template>
<script>
import {getSongUrl,getSongDetail,getLyric} from "../api/base.js"
import {getToplistdetail } from "../api/rank";
import {getLike,getLikeList} from '../api/user.js'
export default {
    props:['playerId','listId'],
    data() {
        return {
            showplayer:false,//隐藏播放器
            iconplay:true, //暂停
            SongDetail:{
                al:{
                    picUrl:null
                }
            },
            liked:false,
            likedlist:[],
            musicData:null,
            value:0,
            timeLeft:0,
            timeRight:0,
            clearset:null, //定时器
            playerLists:[],
            isMusicPlayList:false,
            playerType:1,
            togglelyric: true,
            lyric: [], //歌词
            lyricTop: "210px",
            currentRow: 0, //歌词高亮
        }
    },
    methods: {
        getLikeFun(id){
            getLike({
                id:this.playerId,
                like:id,
                cookie:document.cookie
            }).then(data=>{
                console.log(data);
                // this.getLikeListFun();
                this.liked =!this.liked;              
            })
        },
        getLikeListFun(){
            let id = window.localStorage.getItem("userId");
            getLikeList({uid:id}).then(data=>{
                console.log(data);
                this.likedlist = data.ids;
                let index = this.likedlist.findIndex((item) => item == this.playerId);
                    console.log(index);
                    if(index == "-1"){
                        console.log(this.liked);
                        this.liked = false;
                    }else{
                        this.liked = true;
                        console.log(this.liked);
                    }
            })
        },
        getSongUrlFun(){
                getSongUrl({id:this.playerId}).then(data=>{
                    // console.log(data);
                    this.musicData = data.data[0].url;
                    this.getLikeListFun();
                })
            },
            getSongDetailFun(){
                getSongDetail({ids:this.playerId}).then(data=>{
                    // console.log(data);
                    this.SongDetail = data.songs[0];

                    let index = this.playerLists.findIndex((item) => item.id == data.songs[0].id);
                    // console.log(index);
                    if(index == "-1"){
                        this.playerLists.push(this.SongDetail);
                        // this.$emit("get-history-play",this.SongDetail);
                    }
                })
            },
    // 调用接口获取歌词
    getLyricFun() {
      getLyric({ id: this.playerId }).then((data) => {
        //   console.log(this.playerId);
        this.formatLyric(data.lrc.lyric);
      });
    },
    // 处理歌词结构
    formatLyric(text) {
      this.lyric = [];
      let arr = text.split("\n"); //把原歌曲字符串转歌词
      let row = arr.length; //获取数组长度
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]; //获取数据"[00:00.000] 作词 : 陈镇川"
        let temp_arr = temp_row.split("]"); //分成两个数组
        let lyrictext = temp_arr.pop(); //删除数组最后一个，返回数据

        temp_arr.forEach((element) => {
          let obj = {};
          let time_arr = element.substr(1, element.length - 1).split(":");
          let s = time_arr[0] * 60 + Math.ceil(time_arr[1]); //得到当前秒数
          obj.text = lyrictext;
          obj.time = s;
          if (lyrictext.length > 0) {
            this.lyric.push(obj); //每一行处理好数据放入数组中
          }
        });
      }
    },
            toggleplay(){
                // console.log(11);
                if(this.iconplay){
                    this.$refs.audio.play();
                    clearInterval(this.clearset);
                    this.clearset = setInterval(() => {
                        let currentTime = this.$refs.audio.currentTime;
                        let duration = this.$refs.audio.duration;
                        this.timeLeft = currentTime;
                        //滚动条效果
                        this.value = currentTime / duration *100;
                        if(this.value==100){
                            clearInterval(this.clearset);
                            this.$refs.audio.pause();
                            this.iconplay = true;
                        }
                    }, 999);
                }else{
                    this.$refs.audio.pause();
                    clearInterval(this.clearset);
                }
                this.iconplay = !this.iconplay;
            },
            sliderchange(){
                let duration = this.$refs.audio.duration * this.value /100;
                this.timeLeft = duration;
                this.$refs.audio.currentTime = duration;
            },
            endedFun(){
                this.iconplay = true;
                clearInterval(this.clearset);
                if(this.playerType == 1){
                    this.lowerFun();
                }else {
                    //随机播放
                    let index = parseInt(Math.random() * this.playerLists.length);
                    this.$emit("get-player-id", this.playerLists[index].id); //修改父组件值
                }
            },
            // 音乐播放器数据加载完，直接获取歌曲时间
            canplayFun(){
                // this.toggleplay();
                let duration = this.$refs.audio.duration; //歌总时间
                this.timeRight = duration;
            },
            editPlayerId(id){
                this.$emit("get-player-id",id);
            },
            //下一首歌
            lowerFun(){
               
                if(this.playerType == 1){
                     let {id} = this.SongDetail;
                let index = this.playerLists.findIndex(item=>item.id == id);
                index = index + 1 > this.playerLists.length-1 ? 0:index + 1;
                this.$emit("get-player-id",this.playerLists[index].id);
                }else {
                    //随机播放
                    let index = parseInt(Math.random() * this.playerLists.length);
                    this.$emit("get-player-id", this.playerLists[index].id); //修改父组件值
                }
            },
            //上一首歌
            startup(){
                let {id} = this.SongDetail;
                let index = this.playerLists.findIndex(item=>item.id == id);
                index = index-1 < 0? this.playerLists.length-1:index-1;
                this.$emit("get-player-id",this.playerLists[index].id);
            },
            // 修改播放类型
            changeMode() {
            this.playerType = this.playerType == 1 ? 2 : 1;
            },
            //清空播放列表
            clearList(){
                this.playerLists=[];
            },
            //删除播放列表单个歌曲
            itemdel(index){
                this.playerLists.splice(index,1);
            }
            
    },
    computed:{
        likeshow(){
            return this.liked == true? true : false;
        }
    },
    watch:{
            playerId(){
                this.iconplay = true;
                this.getSongUrlFun();
                this.getSongDetailFun();
                this.getLyricFun();
                // this.toggleplay();
                // console.log("播放器打印：",this.playerId);
            },
            
            listId(){
                // console.log("播放歌单音乐",this.listsId);
                getToplistdetail({id:this.listId}).then(data=>{
                    this.playerLists = data.playlist.tracks;
                })
            },
            timeLeft() {
            for (let i = 0; i < this.lyric.length; i++) {
                if (parseInt(this.timeLeft) == this.lyric[i].time) {
                this.lyricTop = 210 - i * 36 + "px";
                this.currentRow = i; //歌词高亮
                break;
                }
            }
            },
        },
        filters:{
            playerTime(data){
                let m = parseInt(data / 60);// 分钟
                let s = parseInt(data % 60);// 秒
                if(m == 0 && s == 0){
                    return "0:00";
                }else{
                    return m+":"+ (s < 10 ? "0"+ s: s);
                }
            }
        }
}
</script>
<style lang="less">
 .player{
     .red{
         color: red !important;
     }
     .mohu{
         width: 100%;
         height: 100%;
         position: absolute;
         filter: blur(60px);
     }
        position: fixed;
        top:0px;
        left:0px;
        width: 100%;
        height: 100%;
        background: #817C7A;
        z-index: 900;
        .button{
            position: absolute;
            width: 20px;
            font-weight: bold;
            top:14px;
            left:14px;
            .iconfont{
                font-size: 22px;
                color:#fff;
            }
        }
        .title{
            text-align: center;
            color:#fff;
            font-weight: bold;
            h2{
                font-size: 16px;
                margin-top: 10px;
                font-weight: bold;
                color:#fff;
            }
            h3{
                font-size: 12px;
                font-weight: bold;
                color:#fff;
            }
        }
        .content{
            margin-top:10px;
            height: 435px;
            width: 100%;
            position: relative;
            .img{
                width: 225px;
                height: 225px;
                border:48px solid rgb(29,29,29);
                position: absolute;
                top:0px;
                left: 0px;
                right:0px;
                bottom: 0px;
                margin:auto;
                border-radius: 50%;
                img{
                    width: 100%;
                    height: 100%;
                border-radius: 50%;
                }
                &.play{
                    animation: rotate 20s linear infinite;
                }
                &.pause{
                    animation-play-state: paused;
                }
            }
            .lyrics {
            width: 100%;
            height: 445px;
            position: relative;
            overflow: hidden;
            ul {
                position: absolute;
                width: 100%;
                text-align: center;
                top: 210px;
                left: 0px;
                li {
                height: 36px;
                line-height: 36px;
                color: #cbcccc;
                font-size: 16px;
                &.con {
                    color: #fff;
                }
                }
            }
    }
            .pinglun{
                font-size: 24px;
                position: absolute;
                bottom: 0px;
                left: 48%;
                color: #fff;
            }
        }
        .range{
            position: absolute;
            bottom: 82px;
            text-align: center;
            height: 20px;
            width: 100%;
            .bar{
                width: 246px;
                margin:0 auto;
                color:#fff;
                position: relative;
                font-size: 12px;
                .timeLeft{
                    position: absolute;
                    left:-36px;
                    top:-4px;
                }
                .timeRight{
                    position: absolute;
                    right:-36px;
                    top:-4px;
                }
            }
        }
        .buttons{
            display: flex;
            position: absolute;
            bottom: 40px;
            width: 100%;
            .iconfont{
                flex: 1;
                width: 20%;
                text-align: center;
                font-size: 24px;
                line-height: 38px;
                color:#fff;
                &.center{
                    font-size: 38px;
                }
            }
        }
        .custom-button {
        width: 6px;
        height: 6px;
        border: 5px solid #fff;
        background-color: #ee0a24;
        border-radius: 50%;
    }
    }
    .mini-player{
        position: fixed;
        left:0px;
        bottom: 0px;
        height: 48px;
        width: 100%;
        background: #fff;
        box-shadow: 0px 0px 4px 0px #bfbfbf;
        display: flex;
        .img{
            flex:0 0 55px;
            text-align: center;
            img{
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin:6px auto;

            }
            &.play{
                animation: rotate 20s linear infinite;
            }
            &.pause{
                animation-play-state: paused;
            }
        }
        .text{
            flex:1;
            h2{
                font-size: 16px;
                color:#1B1C1C;
                margin-top: 5px;
            }
            h3{
                font-size: 12px;
                color:#929393;
            }
        }
        .control{
            flex:0 0 36px;
            .iconfont{
                font-size: 29px;
                color:#474848;
                margin-top: 10px;
                display: inline-block;
            }
        }
        .lists{
            flex:0 0 36px;
            line-height: 36px;
            .iconfont{
                font-size: 23px;
                color:#474848;
                margin-top: 7px;
                display: inline-block;
            }
        }

    }
    .musicPlayList{
        background-color: #fff;
        position: fixed;
        left: 0px;
        bottom: 0px;
        z-index: 850;
        width: 100%;
        height: 310px;
        border-radius: 5px 5px 0 0;
        .dt{    
                margin-top: 12px;
                height: 28px;
                line-height: 28px;
                position: relative;
                h1{
                    font-size: 16px;
                    text-indent: 18px;
                    i{
                        font-size: 18px;
                        margin-right: 8px;
                    }
                }
                span.iconfont{
                    display: inline-block;
                    position: absolute;
                    top: 2px;
                    right: 25px;
                    font-size: 28px;
                }
            }
        dl{
            
            height: 222px;
            overflow-y: scroll;
            
            dd{
                text-indent: 18px;
                font-size: 14px;
                height: 37px;
                line-height: 37px;
                position: relative;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                p{
                    overflow: hidden;
                    width: 80%;
                    i{
                        color: red;
                    }
                }
                span.iconfont{
                    display: inline-block;
                    position: absolute;
                    top: 2px;
                    right: 25px;
                    font-size: 28px;
                    color: red;
                }
            }
        }
        .button{
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 16px;
            position: absolute;
            left: 0px;
            bottom: 0px;
            width: 100%;
        }
    }
    @keyframes rotate {
        0%{
            transform: rotate(0);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>